<template>
    <div class="indicators-warning">
        <div>
            <h2 class="title">
                <div>
                    <img class="imgSize-alarm" src="@/assets/images/common/alarm.png" alt="" />
                    <span class="fontS16">
                        指标预警
                    </span>
                </div>
                <img class="imgSize linkSzie" src="@/assets/images/common/link.png" @click="linkimage" alt="" />
            </h2>
        </div>
        <div class="indicatorsWarning-concent">
            <p class="txtSize">
                <img class="imgSize" src="@/assets/images/common/warning.png" alt="" />
                目前有<span class="fontW colorR">{{ totalUnhandledNum }}</span
                >条风控触警条目待处理:
            </p>
            <div class="indicatorsWarning-concent_table">
                <el-table :data="detail" border style="width: 100%" height="100%" stripe>
                    <!-- :header-cell-style="{ background: '#DC985B', color: '#000' }" -->
                    <el-table-column prop="tagName" label="指标类型" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="是否触警">
                        <template slot-scope="scope">
                            <div :class="scope.row.isWarning == 'Y' ? 'colorR' : ''">
                                {{ scope.row.isWarning }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="touchRiskNumber" label="触警条数" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="handledNum" label="已处理" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="待处理" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div :class="scope.row.unhandledNum ? 'colorR' : ''">
                                {{ scope.row.unhandledNum }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="calculateTime" label="巡查时间" show-overflow-tooltip :formatter="formatterTime"> </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { getEntryWarning } from '@/pages/home/api';
import { timeFormat } from '@/utils/tools';
import { TagsViewModule } from '@/store/modules/tags-view';
import { getUser } from '@/utils/user-util';
@Component({
    name: 'IndicatorsWarning',
})
export default class IndicatorsWarning extends Vue {
    timeFormat = timeFormat;

    detail: any = [];
    totalUnhandledNum: string = '0';
    TimeSendMessage = null;

    created() {
        this.getList('autoRefresh');
        this.TimeSendMessage = setInterval(() => {
            // if (TagsViewModule.getActive === '/risk/index') {
            this.getList('autoRefresh');
            // console.log(TagsViewModule.getActive, 'huhu');
            // }
        }, 60 * 1000);
    }

    beforeDestroy() {
        if (this.TimeSendMessage) {
            this.TimeSendMessage && clearInterval(this.TimeSendMessage);
            this.TimeSendMessage = null;
        }
    }
    // 获取列表接口
    getList(operateType?: string) {
        getEntryWarning(operateType)
            .then(res => {
                this.detail = res?.entryWarnings || '[]';
                this.totalUnhandledNum = res?.totalUnhandledNum || '0';
            })
            .catch(() => {});
    }

    linkimage() {
        // verifyMenuAuthApi('/risk/panorama/new')
        let obj = getUser().resources.find(item => item.menuUrl == '/risk/panorama/new');
        console.log(obj, 'obj');
        if (obj) {
            top.window.postMessage('/risk/panorama/new', '*');
        } else {
            this.yh_message_error('无条目实时监控页面权限,不可跳转!');
        }
    }

    //  格式化时间
    formatterTime(row, column, cellValue) {
        return cellValue ? timeFormat(cellValue) : '';
    }
}
</script>
<style lang="scss" scoped>
.indicatorsWarning-concent {
    border: 2px solid #888;
    border-radius: 5px;
    box-shadow: 6px 0 6px 0px #b2a9a0, 0 5px 19px 0 #b2a9a0;
    .indicatorsWarning-concent_table {
        margin: 0px 5px 8px 5px;
        height: calc(50vh - 100px);
        min-height: 100px;
        overflow: auto;
    }
}
.imgSize-alarm {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-bottom: -6px;
}
.imgSize {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: -4px;
}
.linkSzie {
    cursor: pointer;
}
.title {
    // color: #dc985b;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
}
.el-divider--horizontal {
    margin: 10px 0 10px 0 !important;
}
.txtSize {
    // color: #dc985b;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 2px;
}

.fontW {
    font-weight: bolder;
    margin: 0 6px;
}
.colorR {
    // color: #d9001b;
    color: red;
}
.fontS16 {
    font-size: 16px;
}
</style>
